<app-common-header [title]="'DEDUCTIONS ORDER'" [routerUrl]="'/tabs/myAccount/setting/payment-settings'">
</app-common-header>

<ion-content>
  <div class="content">
    <div class="">
      <ion-grid class="ion-padding-vertical full">
        <ion-row>
          <ion-col size="9" class="toggle_text">
            <ion-text color="">
              {{'myAccount.setting.payment_settings.deductions_order_setting.toggle_title' | translate}}
            </ion-text>
          </ion-col>
          <ion-col size="3" class="">
            <ion-toggle name="blueberry" value="on" [ngClass]="{'toggle_off':inner,'toggle_on':!inner}" class="toggle_width" [(ngModel)]="toggleEnabled"
              (ionChange)="clickToggle($event)"></ion-toggle>
          </ion-col>
          <ion-col size="12">
            <ion-text color="" class="text_comment">
              {{'myAccount.setting.payment_settings.deductions_order_setting.toggle_title_annotation' | translate}}
            </ion-text>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
    <div class="">
      <ion-grid class="ion-padding-vertical">
        <ion-row>
          <ion-col size="12" class="toggle_text">
            <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
              <div class="example-box" *ngFor="let movie of movies" cdkDrag cdkDragBoundary=".example-list" [cdkDragDisabled]="inner">
                {{movie.paymentMethod}}
                <div class="ion-float-right example-handle" cdkDragHandle>
                  <ion-img src="../../../../../../assets/grip.png" alt=""></ion-img>
                </div>
              </div>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
  </div>
</ion-content>